<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .l-icon img {
        width: 200px;
        height: 200px;
    }

    .box-r button {
        width: 100px;
        height: 40px;
        background-color: #fff;
        border: none;
        font-size: 20px;
    }

    .box-r button.active {
        color: #00a1d6;
    }

    .main {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 8%;
        height: 70%;
        width: 100%;

    }

    .main-ipt {
        width: 88%;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        padding-left: 50px;
        margin-left: 10%;
        height: 52px;
        margin: 0;
    }

    .main-ipt span {
        margin-left: -4%;
        margin-right: -2%;
    }

    .main input {
        width: 90%;
        height: 50px;
        margin-bottom: 20px;
        padding-left: 10px;
        margin-left: 5%;
        border: none;
        outline: none;
    }



    .ft-btn button {
        width: 150px;
        height: 40px;
        border: 1px solid #ccc;
        margin: 0 20px;
        border-radius: 8px;
        font-size: 14px;
    }

    .main .logo img {
        width: 30px;
        height: 30px;
        margin: 0 5px;
    }

    .main .logo span {
        margin-right: 36px;
        line-height: 26px;

    }

    .eye img {
        width: 20px;
        height: 15px;
        margin-left: -18%;
        margin-top: 2%;
    }

    .main-ld img {
        width: 100%;
        height: 100%;
    }

    .main-rd img {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div id="app">
        <!-- 大盒子 -->
        <div class="box"
            style="padding: 52px 65px 29px 92px;position: relative; width: 1000PX;height: 500px;margin: 100px auto; display: flex;border: 1px solid #ccc;">

            <!-- 左侧二维码登录盒子 -->
            <div class="box-l" style="width: 30%;height: 80%;">

                <h2 style="text-align: center;">扫描二维码登录</h2>
                <!-- 二维码 -->
                <div class="l-icon"
                    style="width: 100%;height: 70%;display: flex;flex-direction: column;align-items: center;border-right: 1px solid #ccc; margin-top: 20%;">
                    <!-- 鼠标事件 -->
                    <div class="icon" @mouseover="show=2" @mouseout="show=1">
                        <img src="./img/icon.png" alt="" v-show="show===1">
                        <img src="./img/icon-1.png" alt="" v-show="show===2">
                        <img src="./img/icon-2.png" alt="" v-show="show===3">
                    </div>

                    <p style="margin-top: 10px;line-height: 30px;">请使用<a href="#" @mouseover="show=3" @mouseout="show=1"
                            style="color: #00a1d6;text-decoration: none;">哔哩哔哩客户端</a></p>
                    <p>扫码登录或扫码下载APP</p>
                </div>
            </div>


            <!-- 右侧账号密码登录盒子 -->
            <div class="box-r" style="width: 70%;height: 80%;">

                <!-- 写一个切换登录方式的按钮，点击密码登录时，显示密码登录的输入框，点击短信登录时，显示短信登录的输入框 -->
                <div class="btn" style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;">

                    <button @click="add = 1" :class="{ active: add === 1 }">密码登录</button>
                    <div class="shuxian" style="width: 1px;height: 40px;background-color: #ccc;margin: 0 10px;"></div>
                    <button @click="add = 2" :class="{ active: add === 2 }">短信登录</button>
                </div>

                <!-- 密码登录输入框 -->
                <div class="main" v-if="add === 1">
                    <!-- 账号密码输入框 -->
                    <div class="main-ipt">
                        <span>账号</span>
                        <input type="text" placeholder="请输入账号">
                    </div>
                    <div class="main-ipt" style="position: relative;">
                        <span>密码</span>
                        <!-- 焦点事件 -->
                        <input type="password" placeholder="请输入密码" ref="passwordInput" @focus="child=1" @blur="child=2">
                        <!-- 点击切换密码可见 -->
                        <div class="eye" @click="togglePasswordVisibility"
                            style="width: 20px;height: 15px;position: absolute;right: 16%;top: 34%;cursor: pointer;">
                            <img src="./img/eye.png" alt="" v-show="isPasswordHidden">
                            <img src="./img/eye-1.png" alt="" v-show="!isPasswordHidden">
                        </div>
                        <a href="#"
                            style="margin-left:-12%; color: #00a1d6; font-size: 14px;text-decoration: none;">忘记密码？</a>
                    </div>



                    <!-- 两个按钮，一个注册，一个登录 -->
                    <div class="ft-btn"
                        style="width: 100%;height: 40px;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content:center; margin: 20px 20px;">
                        <button class="ft-l">注册</button>
                        <button class="ft-r" style="background-color: #00a1d6;">登录</button>
                    </div>
                    <span>其他方式登录</span>
                    <!-- 三个图标，分别是微信，微博，qq-->
                    <div class="logo"
                        style="width: 100%;height: 40px;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center; margin: 20px 20px;">
                        <img src="./img/weixin.png" alt="">
                        <span>微信登录</span>
                        <img src="./img/weibo.png" alt="">
                        <span>微博登录</span>
                        <img src="./img/qq.png" alt="">
                        <span>QQ登录</span>
                    </div>
                </div>
                <div class="main-ld" style="height: 200px;width: 200px; position: absolute;bottom: 0; left: 0;">
                    <img src="./img/lift.png" alt="" v-show="child === 2">
                    <img src="./img/lift-1.png" alt="" v-show="child === 1">
                </div>
                <div class="main-rd" style="height: 200px;width: 200px; position: absolute;bottom: 0; right: 0;">
                    <img src="./img/right.png" alt="" v-show="child === 2">
                    <img src="./img/right-1.png" alt="" v-show="child === 1">
                </div>
                <!-- 短信登录输入框 -->
                <div class="main" v-if="add === 2">
                    <div class="main-ipt">
                        <span @click="selectOpen=!selectOpen">+86</span>
                        <div v-show="selectOpen">
                            <p v-for="(country,index) in countries" @click="activeSelectIndex=index,selectOpen=false">
                                {{country.name}}
                                (+{{country.code}})</p>
                        </div>
                        <input type="text" placeholder="请输入账号">
                        <!-- 获取验证码的按钮 -->
                        <button style="height: 40px; width: 120px; margin-left: -20%; border-left: 1px solid #ccc; 
                        color:#ccc;font-size: 16px;line-height: 30px;">获取验证码</button>
                    </div>
                    <div class="main-ipt">
                        <span>验证码</span>
                        <input type="text" placeholder="请输入验证码" @focus="child=1" @blur="child=2">
                    </div>

                    <!-- 两个按钮，一个注册，一个登录，注册按钮在左边，登录按钮在右边,登录按钮默认是蓝色 -->
                    <div class="ft-btn">
                        <button style="background-color: #00a1d6;">登录/注册</button>
                    </div>
                    <span>其他方式登录</span>
                    <!-- 三个图标，分别是微信，微博，qq，在旁边分别显示微信登录，微博登录,QQ登录的文本-->
                    <div class="logo">
                        <img src="./img/weixin.png" alt="">
                        <span>微信登录</span>
                        <img src="./img/weibo.png" alt="">
                        <span>微博登录</span>
                        <img src="./img/qq.png" alt="">
                        <span>QQ登录</span>
                    </div>
                </div>

            </div>
            <!-- 盒子底部 -->
            <div class="foot"
                style="position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center;line-height: 30px;letter-spacing: 2px;">
                <p>未注册过哔哩哔哩的手机号，我们将自动帮你注册账号</p>
                <p>登录或继续使用代表你同意<a href="#">用户协议</a>和<a href="#">隐私政策</a></p>
            </div>


        </div>


    </div>
</body>
<script>
    const { createApp, ref } = Vue;

    createApp({
        setup() {
            const child = ref(2);
            const parent = ref(1);
            const isPasswordHidden = ref(true);
            const passwordInput = ref(null);

            const togglePasswordVisibility = () => {
                if (isPasswordHidden.value) {
                    passwordInput.value.type = 'text';
                } else {
                    passwordInput.value.type = 'password';
                }
                isPasswordHidden.value = !isPasswordHidden.value;
            };


            const show = ref(1)
            const add = ref(1)

            const activeSelectIndex = ref(0);
            const selectOpen = ref(false);
            const countries = ref([
                { name: '中国', code: '86' },
                { name: '美国', code: '1' },
                { name: '英国', code: '44' },
                { name: '法国', code: '33' }
            ]);



            return {
                child,
                parent,
                show,
                add,
                countries,
                activeSelectIndex,
                selectOpen,
                isPasswordHidden,
                passwordInput,
                togglePasswordVisibility

            }
        }
    }).mount('#app')
</script>

</html>